import styles from "@styles/updateChannel.module.less";
import React from "react";
import {
  useRequestAllChannelsQuery,
  useRequestUserChannelsQuery,
} from "@service/channelEndpoints";
import Item from "@pages/home/widgets/updateUserChannel/unSelected/Item";

export default function UnSelected() {
  // 获取所有频道列表
  const { data: allChannels, isSuccess: isAllChannelSuccess } =
    useRequestAllChannelsQuery(undefined);
  // 获取用户频道列表
  const { data: userChannels, isSuccess: isUserChannelSuccess } =
    useRequestUserChannelsQuery(undefined);

  // 判断需要的频道列表是否都获取成功
  if (!isAllChannelSuccess || !isUserChannelSuccess) return null;
  // 从所有频道列表中将用户频道删除从而得到可选频道列表
  // 将用户频道删除, 非用户频道留下
  const canSelectedChannels = allChannels.data.channels.filter(
    (ac) =>
      typeof userChannels.data.channels.find((uc) => uc.id === ac.id) ===
      "undefined"
  );
  return (
    <>
      <div className={styles.title}>
        <h3>可选频道</h3>
      </div>
      <div className={styles.list}>
        {canSelectedChannels.map((channel) => (
          <Item
            key={channel.id}
            channel={channel}
            seq={userChannels.data.channels.length}
          />
        ))}
      </div>
    </>
  );
}
